<template>
  <view>
    <view class="form-view">
      <view class="form-item form-pa20 clearfix">
        <view class="float_left form-label">
          名称
          <text class="icon-requird">*</text>
        </view>
        <view class="float_right form-value"
          ><input
            type="text"
            placeholder="请输入计量单位名称"
            placeholder-class="input-pl"
            class="form-input"
            v-model="form.unitName"
        /></view>
      </view>
      <view class="form-item form-pa20 clearfix">
        <view class="float_left form-label">是否禁用</view>
        <view class="float_right form-value">
          <switch :checked="form.enableStatus === 4" @change="radioChange" :disabled="!!form.unitName"/>
        </view>
      </view>
    </view>
    <view class="fixed-bottom">
      <view class="sub-btn" @click="submitData">保存</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      finance_id: 0,
      form: {
        unitName: "",
        enableStatus: 5,
      },
      submitting: false,
    };
  },
  onLoad(options) {
    if (options.id) {
      this.finance_id = options.id;
      this.form.unitName = options.unitName;
      this.form.enableStatus = Number(options.enableStatus);
      uni.setNavigationBarTitle({
        title: "修改计量单位",
      });
    } else {
      uni.setNavigationBarTitle({
        title: "新增计量单位",
      });
    }
  },
  methods: {
    radioChange(e) {
      this.form.enableStatus = e.detail.value ? 5 : 4;
    },
    async submitData() {
      if (this.submitting) return;
      if (!this.form.unitName) {
        this.$u.toast("请输入名称");
        return;
      }
      if (this.form.unitName.length > 20) {
        this.$u.toast("名称不能超过20个字符");
        return;
      }
      this.submitting = true;
      let target = {};
      const params = this.form;
      if (this.finance_id) {
        target = await this.$u.api.unitEdit({
          id: this.finance_id,
          ...params,
        });
      } else {
        target = await this.$u.api.unitAdd({
          ...params,
        });
      }
      uni.showLoading();
      const { errorcode } = target;
      uni.hideLoading();
      this.submitting = false;
      if (errorcode !== 0) return;
      this.$u.toast("提交成功");
      // 先 emit 刷新事件，再返回
      uni.$emit('unit-refresh');
      setTimeout(() => {
        uni.navigateBack();
      }, 300);
    },
    goPage(url, type = "navigateTo") {
      if (type === "redirectTo") {
        uni.redirectTo({
          url,
        });
      } else {
        uni.navigateTo({
          url,
        });
      }
    },
  },
};
</script>

<style scoped>
.form-view {
  background: #fff;
  border-radius: 16rpx;
  margin: 32rpx 24rpx 24rpx 24rpx;
  padding: 32rpx 24rpx 8rpx 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
}
.form-item {
  display: flex;
  align-items: center;
  margin-bottom: 32rpx;
  padding-bottom: 16rpx;
  border-bottom: 1rpx solid #f0f0f0;
}
.form-item:last-child {
  border-bottom: none;
}
.form-label {
  font-size: 30rpx;
  color: #333;
  min-width: 120rpx;
  font-weight: 500;
  display: flex;
  align-items: center;
}
.icon-requird {
  color: #f56c6c;
  margin-left: 8rpx;
  font-size: 28rpx;
}
.form-value {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.form-input {
  font-size: 30rpx;
  color: #333;
  border: 1rpx solid #e5e5e5;
  border-radius: 8rpx;
  padding: 16rpx 20rpx;
  background: #f7f8fa;
  width: 100%;
  box-sizing: border-box;
  min-height: 70px;
}
.fixed-bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  padding: 32rpx 32rpx 40rpx 32rpx;
  box-shadow: 0 -2rpx 12rpx #eee;
  z-index: 99;
}
.sub-btn {
  background: linear-gradient(90deg, #fb5904 0%, #ff9000 100%);
  color: #fff;
  text-align: center;
  border-radius: 12rpx;
  padding: 24rpx 0;
  font-size: 32rpx;
  font-weight: 600;
  box-shadow: 0 4rpx 16rpx rgba(251, 89, 4, 0.08);
  letter-spacing: 2rpx;
}
</style>
}
</style>
